import ReactDOM from 'react-dom';
import { Suspense } from 'react';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { Spin } from 'antd';
import
{
    BrowserRouter as Router,
    Switch,
    Route
} from "react-router-dom";
import 'antd/dist/antd.css';
import NavigateLeft from './components/Navigate/NavigateLeft';
import styled from 'styled-components';
import { route } from './route/routes';

const Wrapper = styled.div`
    display:flex;
    width:100vw;
    height:100vh;
    /* justify-content: space-between; */
    align-items: center;
`;
const Main = styled.div`
    width:80%;
    height:100vh;
    display:inline-block;
`;
const Nav = styled.div`
    width:256px;
    height:100vh;
    overflow:auto;
    display:inline-block;
`;
ReactDOM.render(
    <Suspense fallback={<Spin />}>
        <Wrapper>
            <Router>
                <Nav id='nav'>
                    <NavigateLeft />
                </Nav>
                <Main id='main'>
                    <Switch>
                        {
                            route.map((item: any, index: any) =>
                            {
                                return (
                                    <Route path={item.path} key={index}>
                                        {item.components}
                                    </Route>
                                );
                            })
                        }
                    </Switch>
                </Main>
            </Router>
        </Wrapper>
    </Suspense>

    ,
    document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
